import React, { Component } from 'react'
import "./SearchCenter.scss"
import { NavBar, Icon,SearchBar } from 'antd-mobile'
import {withRouter} from 'react-router-dom'
import {getProductList} from '../../data/api'
class SearchCenter extends Component {
  timeId=null;
  // 防抖
  debounce=(fn,timeout) => {
    if(this.timeId){
      clearTimeout(this.timeId);
      this.timeout=null
    }
    this.timeId=setTimeout(fn,timeout);
  }
  state={
    productList:[]
  }
  
  handleChange= async(value) => {
    this.debounce(async() => {
      // console.log(value);
      let res=await getProductList({query:value});
      // console.log(res.message);
      this.setState(()=>{
        return{
          productList:res.message || []
        }
      })
    },500)
  }
  //点击列表产品
  handleClick=(goods_id) => {
    this.props.history.push("goodDetail?goods_id="+goods_id)
  }
  //点击搜索
  handleSearch=(params) => {
    console.log("搜索");
  }
  
  render() {
    return (
      <div>
        <NavBar
        onLeftClick={() => {
          this.props.history.go(-1)
        }
        }
          icon={<Icon type="left" />}
        >
          搜索中心
        </NavBar>
        <SearchBar cancelText="搜索" placeholder="搜索产品" onChange={this.handleChange} 
        onCancel={this.handleSearch}
        />
        {/* 产品列表额开始 */}
        <div className="scProductList">
          {
            this.state.productList.map(v=>{
              return <div className="productListItem" key={v.goods_id}
              onClick={this.handleClick.bind(this,v.goods_id)}
              >
                <span className="text">
                  {v.goods_name}
                </span>
              </div>
            })
          }
        </div>
        {/* 产品列表结束 */}
      </div>
    )
  }
}

export default withRouter(SearchCenter)